<template>
  <div>
    <Box :caption="caption">
      <div class="business__manage" v-if="$route.path ==='/configManage/businessManage'">
        <!-- 搜索栏、新增按钮 -->
        <div class="top">
          <span>系统名称<el-input  v-model="searchSys" placeholder="请输入系统名称" prefix-icon="el-icon-search" @keypress.enter.native="searchList" maxlength="30" clearable @clear="getBusinessList"></el-input></span>
          <span>业务名称<el-input  v-model="searchBusiness" placeholder="请输入业务名称" prefix-icon="el-icon-search" @keypress.enter.native="searchList" maxlength="30" clearable @clear="getBusinessList"></el-input></span>
          <el-button class="search" @click="searchList"><i class="el-icon-search"></i>搜索</el-button>
          <el-button class="add right" @click="()=>{$router.push('/configManage/businessAdd')}"><i class="el-icon-plus"></i>新增</el-button>
        </div>
        <!-- 列表 -->
        <div class="content">
          <el-table
              :data="businessList"
              stripe>
            <el-table-column
                prop="name"
                label="业务名称"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="sysName"
                label="所属系统"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="transmissionName"
                label="传输配置"
                min-width="120">
            </el-table-column>createDate
            <el-table-column
                prop="createDate"
                label="创建时间"
                min-width="130">
            </el-table-column>
            <el-table-column
                prop="updateDate"
                label="更新时间"
                min-width="130">
            </el-table-column>
            <el-table-column
                prop="updateBy"
                label="更改者"
                min-width="100">
            </el-table-column>
            <el-table-column
                prop="remarks"
                label="备注"
                min-width="150">
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="80">
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.status"
                    active-color="#1e9ffe"
                    inactive-color="#BFBFBF"
                    active-value="start"
                    inactive-value="stop"
                    :width="56"
                    :class="{ 'switch-is-actived': scope.row.status === 'start' }"
                    @change="changeBusinessStatus(scope.row.id,scope.row.status)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template slot-scope="scope">
                <div class="operation">
                  <el-tooltip
                      content="查看"
                      effect="light"
                      popper-class="small-tip"
                  >
                    <el-button
                        class="action-btn look"
                        icon="el-icon-view"
                        @click="()=>{$router.push({path:'/configManage/businessView',query:{id:scope.row.id}})}"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                      content="编辑"
                      effect="light"
                      popper-class="small-tip"
                  >
                    <el-button
                        class="action-btn edit"
                        icon="el-icon-edit"
                        @click="()=>{$router.push({path:'/configManage/businessEdit',query:{id:scope.row.id}})}"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                      content="删除"
                      effect="light"
                      popper-class="small-tip"
                  >
                    <el-button
                        class="action-btn del"
                        icon="el-icon-delete"
                        @click="deleteBusiness(scope.row.id)"
                    ></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="footer">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :page-count="pageCount"
              >
          </el-pagination>
        </div>
      </div>
      <router-view/>
    </Box>
  </div>
</template>

<script>
import Box from '@/components/pc/Box'
import axios from 'axios'

export default {
  name: "businessManage",
  components:{Box},
  data(){
    return{
      caption:"业务管理",
      searchBusiness:'',
      searchSys:'',
      currentPage:1,
      businessList: [],
      pageCount:0
    }
  },
  watch: {
	  // 监听路由
	  $route(to,from){
		  // 进入之前
		  if(to.path == '/configManage/businessManage'){
			  // 如果搜索不为空时
			  if(this.searchBusiness !== '' || this.searchSys !== '' ){
				  this.searchList();
			  }else {
				  this.getBusinessList();
			  }
		  };
	  }
	  
  },
  mounted(){
    this.getBusinessList()
  },
  methods: {
    getBusinessList(){
      this.$Http.businessList({
        pageSize: 8,
        currentPage: this.currentPage,
      }).then(res=>{
        this.pageCount = res.data.pageCount;
        this.businessList = res.data.list;
      })
    },
    //换页
    handleCurrentChange(newPage){
      this.currentPage=newPage
      this.getBusinessList()
    },
    deleteBusiness(id){
      this.$confirm('确认删除该业务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$Http.businessDel({
          id:id
         
        }).then(res=>{
          if(res.code === "SUCCESS"){
            this.getBusinessList();
            this.$message.success("删除成功");
            
          }
          else{
            this.$message.error(res.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    searchList(){
      this.$Http.businessSearch({
            pageSize: 8,
            currentPage: 1,
            businessName:this.searchBusiness,
            sysName:this.searchSys
          }
      ).then(res=>{
        this.currentPage = 1;
        this.pageCount = res.data.pageCount;
        this.businessList = res.data.list;
      })
    },
    changeBusinessStatus(id,status) {
    	this.$Http.businessStatusChange({
		    id: id,
		    status:status
	    }).then(res=>{
        if (res.code === "SUCCESS") {
          this.$message.success("业务状态改变成功");
        } else {
          this.status=status;
          this.getBusinessList()
          this.$message.error(res.message);
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";

.business__manage{
  .top{
    .el-input{
      width: 200px!important;
    }
  }
}
</style>

